<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>有宠-分享潮流宠物资讯,打造宠物行业门户</title>
    <link rel="stylesheet" href="css/swiper.min.css">

    <style>
        /* * {
            margin: 0;
            padding: 0;
        } */
        
        .gotop {
            width: 45px;
            height: 45px;
            position: fixed;
            left: 50%;
            bottom: 50px;
            z-index: 10;
            margin-left: 650px;
            text-align: center;
            display: none;
            border-radius: 5px;
            background: #ccc url(./img/icon-gotop.png) no-repeat 50%;
            color: #fff;
        }
        
        h2 {
            line-height: 1;
            font-weight: normal;
            font-family: Microsoft yahei, simhei, arial;
        }
        
        .container {
            width: 1200px;
            margin: 0 auto;
        }
        
        .banner-core {
            padding-top: 20px;
            display: grid;
            grid-template-columns: 330px 450px 360px;
            grid-template-rows: 384px 384px;
            grid-row-gap: 16px;
            justify-content: space-between;
        }
        
        .banner-side {
            padding-top: 3px;
            overflow: hidden;
            border: 1px solid #ddd;
        }
        
        #swiper1 .swiper-container {
            width: 322px;
            height: 380px;
            margin-bottom: 4px;
        }
        
        html,
        body {
            position: relative;
            height: 100%;
        }
        
        #swiper1 .swiper-slide img {
            max-width: 100%;
            /* width: 100% !important; */
            height: 100% !important;
            display: block;
        }
        
        #swiper1 .swiper-slide img:hover {
            opacity: .8;
        }
        
        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }
        
        #swiper1 .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
        
        #swiper1 .swiper-wrapper {
            /* padding-bottom: 10px; */
            width: 322px;
            height: 380px;
            bottom: 0px;
        }
        
        .caption {
            padding: 0 10px;
            line-height: 40px;
            color: #fff;
            font-size: 14px;
            width: 96%;
            position: absolute;
            bottom: -15px;
            left: 0;
            background-color: rgba(0, 0, 0, 0.4);
            text-align: center;
        }
        
        .ell {
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: inline-block;
        }
        
        p {
            word-break: break-all;
        }
        
        #swiper1 .swiper-slide .caption span {
            text-align: center;
            width: 100%;
            height: 100%;
        }
        
        #swiper1 .swiper-pagination {
            position: absolute;
            bottom: 10px;
            text-align: center;
            font-size: .85em;
            font-family: Arial;
            font-weight: bold;
            color: #666;
            padding-top: 20px;
        }
        
        a {
            color: #000;
            text-decoration: none;
            outline: none;
        }
        
        a:hover {
            color: #f2473d;
        }
        
        a:hover .caption {
            color: #f2473d;
        }
        
        .matop {
            margin-top: 16px;
        }
        
        div {
            display: block;
        }
        
        div .cont {
            grid-row: 2/3;
            width: 100%;
            height: 100%;
            /* clear: both; */
            box-sizing: border-box;
            padding: 5px 20px;
            border: 1px solid #ddd;
            /* overflow-x: hidden; */
        }
        
        div .hd {
            min-height: 34px;
            position: relative;
            border-bottom: 1px solid #ddd;
        }
        
        .hd .title {
            /* position: relative;
            top: -16px; */
            min-width: 50px;
            min-height: 20px;
            position: relative;
            float: left;
            font-size: 20px;
            margin-bottom: 0px;
            padding-bottom: 13px;
            border-bottom: 2px solid #f2473d;
        }
        
        .cont .hd a {
            position: absolute;
            right: 0px;
            /* float: right; */
            top: 16px;
            width: 60px;
            text-align: right;
            color: #9A9A9A;
        }
        
        .item-first {
            grid-column: 1;
            width: 330px;
            height: 768px;
            overflow: hidden;
        }
        
        .itemfirstX {
            grid-row: 2;
            margin-top: 16px;
            width: 330px;
            height: 356px;
            overflow: hidden;
        }
        
        .picture img {
            width: 80px;
            height: 80px;
        }
        
        .industry-list .item {
            width: 100%;
            height: 80px;
            position: absolute;
            padding: 0px;
            margin-top: 0px;
            box-sizing: border-box;
        }
        
        .industry-list .item .title {
            width: 100%;
            font-size: 16px;
            color: #000;
            font-weight: bold;
            line-height: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: wrap;
        }
        
        .industry-list .item .picture {
            max-width: 80px;
            max-height: 80px;
            line-height: 0;
        }
        
        .industry-list .item .summary {
            width: 100%;
            margin-top: -8px;
            font-size: 12px;
            line-height: 18px;
            height: 36px;
            overflow: hidden;
            /* text-overflow: ellipsis; */
        }
        
        .picture {
            transition: all .2s;
            width: 100%;
        }
        
        img {
            border: none;
            /* display: none; */
            vertical-align: middle;
        }
        
        h3 {
            display: inline-block;
            margin-bottom: 0.01px;
            font-size: 1.17em;
            font-weight: bold;
            color: #639e8d;
        }
        
        .card {
            display: grid;
            grid-template-columns: 80px 208px;
            height: 80px;
            margin: 0 auto;
            max-width: 288px;
            background: #333;
            border-radius: 5px;
            margin-top: 15px;
            /* box-shadow: 0px 10px 10px #ddd; */
            position: relative;
            text-overflow: ellipsis;
            box-sizing: border-box;
            transition: margin 0.6s ease-in-out;
        }
        
        .card>.entry {
            height: 100%;
            position: relative;
            top: 0;
            right: 0;
            background: white;
            transition-delay: 0.2s
        }
        
        .card>.entry>.context {
            position: relative;
            width: 208px;
            height: 36px;
            white-space: wrap;
            /* overflow: hidden; */
            text-overflow: ellipsis;
        }
        
        .card>.entry,
        .card>.entry>.context>.text {
            right: 0;
            top: 0;
            width: 100%;
            overflow: hidden;
            position: relative;
            height: 80px;
            width: 208px;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
        }
        
        .card>.entry>.context>.text {
            left: 0px;
            height: 80px;
            width: 200px;
            line-height: 4px;
            transition-delay: 0.4s
        }
        
        .card>.entry h3,
        .card>.entry p {
            text-shadow: 0 0 0 #333;
            transition-delay: 0.4s;
            width: 185px;
            text-overflow: ellipsis;
        }
        
        .card>.entry .meta {
            font-size: 12px;
            color: #c9c9c9;
            padding-left: 10px;
            text-align: right;
        }
        
        .card>.entry>.context>.text h3,
        .card>.entry>.context>.text p {
            padding: 5px 0 0 10px;
            text-overflow: ellipsis;
        }
        
        .card>.image {
            left: 0;
            top: 0;
            position: relative;
            background: #333;
            height: 80px;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
        }
        
        .card>.image>img {
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
        }
        
        .lisiso {
            margin-top: 0px;
            font-size: 12px;
            line-height: 18px;
            height: 36px;
            overflow: hidden;
        }
        
        .card:hover {
            box-shadow: 0px 10px 10px #ddd;
            cursor: pointer;
        }
        
        .clearfix {
            *zoom: 1;
        }
        
        .clearfix:after {
            display: block;
            clear: both;
            height: 0;
            font-size: 0;
            content: ' ';
        }
        
        .item-second {
            grid-column: 2;
            grid-row: 1/span 2;
            width: 450px;
            height: 760px;
            /* display: inline-block; */
            float: left;
            /* margin-left: 30px; */
            background-color: #fff;
        }
        
        .banner-cont {
            width: 450px;
            width: 100%;
            height: 760px;
            position: relative;
            overflow: hidden;
        }
        
        .item-second .hd {
            min-height: 50px;
            position: relative;
            border-bottom: 1px solid #ddd;
        }
        
        .banner-cont .focal li .photo img {
            width: 100%;
        }
        
        .photo {
            width: 120px;
            height: 120px;
            position: absolute;
            left: 0px;
            /* display: block; */
        }
        
        .banner-cont .focal {
            padding-left: 10px;
        }
        
        .banner-cont .focal li .photo {
            line-height: 0;
            /* display: inline-block; */
        }
        
        .banner-cont .focal a {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .banner-cont .focal li {
            position: relative;
            height: 120px;
            padding-left: 136px;
        }
        
        ul {
            list-style-type: none;
        }
        
        .banner-cont .focal .summary {
            height: 96px;
            font-size: 14px;
            line-height: 24px;
        }
        
        li {
            position: relative;
            height: 120px;
            padding-left: 100px;
            margin-left: -10px;
            ;
        }
        
        li .text {
            position: absolute;
            top: 0px;
            left: 130px;
            width: 272px;
            height: 120px;
            overflow: hidden;
        }
        
        li:first-child {
            margin-bottom: 10px;
        }
        
        em,
        i {
            font-style: normal;
        }
        
        .c:after {
            content: "";
            display: table;
            clear: both;
        }
        
        .banner-cont .news-po-list {
            height: 408px;
            border-top: 1px dashed #959595;
            padding-top: 10px;
            margin-top: 10px;
            overflow: hidden;
            position: relative;
        }
        
        .banner-cont .news-po-list em:before {
            left: 0px;
        }
        
        table:first-child {
            margin-top: 1px;
        }
        
        table:last-child {
            margin-top: 10px;
        }
        
        table {
            /* border: 1px solid red; */
            border-collapse: 0px solid red;
            border-spacing: 15px;
            line-height: 30px;
            width: 408px;
            height: 180px;
            margin-left: -15px;
        }
        
        .banner-cont .news-po-list em:before,
        .banner-cont .news-po-list em:after {
            width: 1px;
            height: 13px;
            position: absolute;
            top: 30px;
            content: "";
            background-color: #666;
        }
        
        .banner-cont .news-po-list td a {
            margin: 0;
            padding: 0px;
        }
        
        .banner-cont .news-po-list td a {
            float: left;
            /* position: absolute; */
            /* left: 36px; */
            padding-left: 10px;
            line-height: 30px;
            display: block;
            color: #434343;
            font-size: 14px;
            box-sizing: border-box;
        }
        
        .banner-cont .news-po-list td a {
            line-height: 13px;
        }
        
        .banner-cont .news-po-list td:first-child {
            width: calc(100% - 80px);
            box-sizing: border-box;
            padding: 0 20px;
            margin: 0 20px;
            border-left: 1px solid #000;
            border-right: 1px solid #000;
        }
        
        .banner-cont .news-po-list td:first-child a:before,
        .banner-cont .news-po-list td:first-child a:after {
            font-style: normal;
            content: "";
            width: 1px;
            height: 13px;
            padding-top: 0rem;
            overflow: hidden;
            position: absolute;
            background-color: transparent;
        }
        
        .banner-cont .news-hot-list .item {
            padding: 0px 0 0px 110px;
            overflow: hidden;
            /* width: 318px; */
            height: 110px;
        }
        
        .banner-cont .news-hot-list .photo img {
            width: 90px !important;
            height: 90px !important;
        }
        
        .banner-cont .news-hot-list .item:first-child {
            margin-top: -10px;
            margin-bottom: 0px;
        }
        
        .banner-cont .news-hot-list {
            position: relative;
            right: 30px;
        }
        
        .index-rit .hd {
            min-height: 51px;
            position: relative;
            border-bottom: 1px solid #ddd;
            *zoom: 1;
        }
        
        .index-rit {
            float: left;
            margin-left: 0px;
            width: 360px;
            height: 407px;
        }
        
        .banner-cont .news-hot-list .btn {
            background: #fff;
            color: #666;
            border: 1px solid #d6d6d6;
            width: 95px;
            height: 24px;
            line-height: 25px;
            text-align: center;
            position: absolute;
        }
        
        .banner-cont .news-hot-list .summary {
            height: 20px;
            margin: 5px 0 16px;
            overflow: hidden;
            font-size: 12px;
            color: #434343;
            width: 100%;
            display: block;
        }
        
        .tag-cont {
            width: 369px;
            height: 135px;
            display: table;
            position: relative;
        }
        
        .tag-cont ul {
            right: 13px;
            position: absolute;
            display: grid;
            grid-template-columns: 112px 112px 112px;
            grid-template-rows: 37px 37px 37px;
            grid-column-gap: 9px;
            grid-row-gap: 8px;
        }
        
        .tag-cont li {
            padding: 0;
            margin: 0;
            width: 112px;
            float: left;
            display: flex;
            justify-content: space-around;
            /* margin: 8px 9px 0 0; */
            text-align: center;
            background: #fff;
            color: #666;
            border: 1px solid #d6d6d6;
            height: 35px;
            line-height: 35px;
            font-size: 14px;
        }
        
        .div-down {
            width: 360px;
            height: 178px;
            margin-top: 20px;
            background: #999;
            display: block;
        }
        
        .pets-news {
            height: 200px;
            position: relative;
        }
        
        .mod {
            margin-bottom: 20px;
        }
        
        .bx-wrapper {
            position: relative;
            margin: 0 auto 60px;
            padding: 0;
            *zoom: 1;
            display: grid;
            grid-template-columns: 228px 228px 228px 228px 228px;
            grid-template-rows: 220px;
            /* grid-column-gap: 15px; */
            touch-action: pan-y;
        }
        
        #swiper2 .swiper-wrap {
            height: 200px;
            /* float: left; */
            display: flex;
            overflow: hidden;
        }
        
        #swiper2 .swiper-wrap .photo img {
            position: relative;
            top: -118PX;
            width: 228px;
            height: 220px;
        }
        
        #swiper2 .swiper-container {
            width: 100%;
            position: relative;
            height: 100%;
            transition-duration: 0s;
            overflow: hidden;
            transform: translate3d(-3159px, 0px, 0px);
        }
        
        #swiper2 .swiper-container .hide {
            opacity: 0;
        }
        
        .swiper-button-next {
            background-position: left top;
            position: absolute;
            right: -40px;
            top: 50%;
            margin-top: -40px;
            outline: none;
        }
        
        .swiper-button-prev {
            background-position: right top;
            position: absolute;
            left: -40px;
            top: 50%;
            margin-top: -40px;
            outline: none;
        }
        
        #swiper2 .swiper-button-next,
        #swiper2 .swiper-button-prev {
            transition: opacity .5s;
            outline: none;
        }
        
        #swiper2 .swiper-wrap div {
            width: 228px;
            height: 1;
            /* float: left; */
            /* left: 0px; */
            /* padding-left: 0px; */
            /* margin-right: 15px; */
        }
        
        #swiper2 .swiper-slide img {
            width: 100%;
            height: 100%;
            max-width: auto;
            max-height: auto;
            transform: translate(-26%, 0%);
            position: absolute;
            left: 50%;
            top: 50%;
        }
        
        #swiper2 .swiper-wrap .caption {
            width: 91.2%;
        }
        
        #swiper2 .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            /* Center slide text vertically */
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 15px;
        }
        
        .talk-list {
            height: 640px;
            /* top: -10px; */
            display: grid;
            grid-template-columns: 220px 220px 220px 220px 220px;
            grid-template-rows: 300px 300px;
            grid-gap: 15px;
        }
        
        .talk-list div {
            /* display: flex; */
            /* justify-content: space-around; */
            margin: 20px 15px 0px 2px;
            float: left;
        }
        
        div .cont .hd {
            min-height: 50px;
            position: relative;
            border-bottom: 1px solid #ddd;
            margin-bottom: 10px;
        }
        
        .picwall {
            width: 1200px;
            height: 717px !important;
            margin: 0 auto;
            position: relative;
            padding: 0px auto;
            margin-bottom: 20px;
            ;
        }
        
        .photo:hover img {
            opacity: 0.8;
        }
        /* .talk-list .txt a {
            height: 100%;
            overflow: hidden;
            position: relative;
            display: block;
            cursor: pointer;
        }
        
        .tale-list div:hover .txt {
            display: block;
            color: #fff;
        }
        
        .talk-list .txt {
            position: absolute;
            line-height: 40px;
            height: 40px;
            text-align: left;
            width: 1.8rem;
            display: block;
        }
        
        .txt {
            padding: 0 10px;
            line-height: 40px;
            color: #fff;
            font-size: 14px;
            width: 220px;
            position: absolute;
            background-color: rgba(0, 0, 0, 0.4);
            text-align: center;
        }
        
        .talk-list div:first-child .txt {
            position: absolute;
            left: 20px;
            top: 280px;
        }
        
        .talk-list div:nth-child(7) .txt {
            position: absolute;
            left: 489px;
            bottom: 60px;
        }
         */
        
        .talk-list div:first-child img {
            grid-column: 1/ span 2;
            width: 455px;
            height: 300px;
            position: relative;
            left: 20px;
            top: -20px;
            /* margin: -31px 0 0 155px; */
        }
        
        .talk-list div:nth-child(2) img {
            grid-column: 3;
            position: relative;
            left: 490px;
            top: -20px;
        }
        
        .talk-list div:nth-child(3) img {
            position: relative;
            left: 725px;
            top: -20px;
        }
        
        .talk-list div:nth-child(4) img {
            position: relative;
            left: 960px;
            top: -20px;
        }
        
        .talk-list div:nth-child(5) img {
            position: relative;
            left: 20px;
            top: 295px;
        }
        
        .talk-list div:nth-child(6) img {
            position: relative;
            left: 255px;
            top: -20px;
        }
        
        .talk-list div:nth-child(7) img {
            grid-column: 2/span 2;
            grid-row: 2;
            position: relative;
            left: 490px;
            top: -20px;
        }
        
        .talk-list div:last-child img {
            position: relative;
            left: 960px;
            top: -20px;
        }
        
        .talk-list .focal .name {
            width: 100px;
            float: left;
            margin-left: 37%;
        }
        
        .talk-list .txt .name {
            width: 80px;
            float: left;
            margin-left: 25%;
        }
        
        .talk-list .txt .name {
            width: 80px;
            float: left;
            margin-left: 25%;
        }
        
        .petency {
            margin: 20px auto;
            width: 1200px;
            height: 803px;
            overflow: hidden;
        }
        
        .petency .hd .title {
            top: -15px;
            min-width: 50px;
            min-height: 20px;
            position: relative;
            float: left;
            font-size: 20px;
            margin-bottom: 0px;
            padding-bottom: 13px;
            border-bottom: 2px solid #f2473d;
        }
        
        .filter-menu {
            height: 24px;
            float: right;
        }
        
        .filter-menu .filter-dog:hover,
        .filter-menu .filter-dog.current {
            color: #ff904e;
        }
        
        .filter-menu a:hover,
        .filter-menu a.current {
            color: #959595;
        }
        
        .filter-menu .brl {
            border-right: 1px solid #e4e4e4;
        }
        
        .filter-menu a {
            width: 88px;
            position: relative;
            float: left;
            text-indent: 40px;
            line-height: 24px;
            font-size: 18px;
            color: #c6c5c5;
            -webkit-transition: all 0.2s;
            transition: all 0.2s;
        }
        
        .filter-menu a:before {
            width: 31px;
            height: 24px;
            position: absolute;
            left: 10px;
            content: "";
            background: url(./img/icon-pets-filter-new.png) no-repeat;
            -webkit-transition: all 0.2s;
            transition: all 0.2s;
        }
        
        .filter-menu .filter-dog:hover:before,
        .filter-menu .filter-dog.current:before {
            background-position: 0 -27px;
        }
        
        .filter-menu .filter-cat:hover:before,
        .filter-menu .filter-cat.current:before {
            background-position: -31px -27px;
        }
        
        .filter-menu .filter-cat:before {
            background-position: -31px 0;
        }
        
        .filter-menu .filter-rabbit:hover:before,
        .filter-menu .filter-rabbit.current:before {
            background-position: -62px -27px;
        }
        
        .filter-menu .filter-rabbit:before {
            background-position: -62px 0;
        }
        
        .filter-menu .filter-mouse:hover:before,
        .filter-menu .filter-mouse.current:before {
            background-position: -93px -27px;
        }
        
        .filter-menu .filter-mouse:before {
            background-position: -93px 0;
        }
        
        .filter-menu .more {
            background: none;
            font-size: 12px;
            width: 60px;
            text-indent: 0px;
            text-align: right;
        }
        
        .filter-menu .filter-other:hover:before,
        .filter-menu .filter-other.current:before {
            background-position: -124px -27px;
        }
        
        .filter-menu .filter-other:before {
            background-position: -124px 0;
        }
        
        .filter-menu .more:before {
            background: none;
        }
        
        .petency .pets-list {
            width: 110%;
            left: 0;
        }
        
        .petency .pets-list .photo img {
            position: absolute;
            top: -30px;
            width: 275px !important;
            height: 225px !important;
        }
        
        .pets-list .item .title-box {
            color: #434343;
            font-size: 14px;
            height: 60px;
            overflow: hidden;
            position: absolute;
            bottom: 0;
            /* margin: 0; */
        }
        
        .petency .pets-list .item {
            width: 275px;
            height: 100%;
            float: left;
            padding: 0;
            margin: 20px 20px 0 0;
        }
        
        .petency .pets-cont {
            width: 1160px;
            /* height: 803psx; */
            padding: 20px 19px;
            border: 1px solid #ddd;
            overflow: hidden;
        }
        
        .filter-menu .brl {
            border-right: 1px solid #e4e4e4;
        }
        
        .petency ul {
            /* height: 726px; */
            padding: 0;
            margin: 0;
            display: grid;
            grid-template-columns: 275px 275px 275px 275px;
            grid-template-rows: 343px 343px;
            grid-gap: 20px;
            position: relative;
        }
        
        .petency .pets-list .item .summary {
            color: #000000;
            font-size: 18px;
            position: relative;
            top: 230px;
            padding-bottom: 13px;
            font-weight: bold;
            margin: 0;
        }
        /* .petency ul li:first-child {
            position: absolute;
            left: 0;
        } */
    </style>
</head>

<body>
    <div class="container">
        <div class="index-banner">
            <div class="banner-core">
                <div class="item-first">
                    <div class="banner-side">
                        <div id="swiper1" class="swiper-container" style="overflow: hidden; position: relative">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <a href="#">
                                        <p><img src="img/pet1.jpg" alt="有宠专家在线 闪耀归来！快来下载最新版本吧~"></p>
                                        <p class="caption"><span class="summary ell">有宠专家在线 闪耀归来！快来下载最新版本吧~</span></p>
                                    </a>
                                </div>
                                <div class="swiper-slide">
                                    <a href="#">
                                        <p><img src="img/pet2.jpg" alt="饲养猫咪的五大注意事项"></p>
                                        <p class="caption"><span class="summary ell">饲养猫咪的五大注意事项</span></p>
                                    </a>
                                </div>
                                <div class="swiper-slide">
                                    <a href="#">
                                        <p><img src="img/pet3.jpg" alt="你和宠物可以沟通吗？这3个方法也许有用"></p>
                                        <p class="caption"><span class="summary ell">饲养猫咪的五大注意事项</span></p>
                                    </a>
                                </div>
                            </div>
                            <!-- 如果需要分页器 -->
                            <div class="swiper-pagination"></div>
                        </div>
                        <!-- end 灯幻片 -->
                    </div>
                    <!--行业资讯 [-->
                    <div class="itemfirstX">
                        <div class="cont Matop16 ">
                            <div class="hd clearfix">
                                <h2 class="title">行业资讯</h2>
                                <a href="#">更多>></a>
                            </div>
                            <!-- width="80" height="80"  -->
                            <article class="card ">
                                <div class="image">
                                    <img class="picture" src="img/petinst1.jpg" />
                                </div>
                                <div class="entry">
                                    <div class="context">
                                        <div class="text">
                                            <h3>Explode!</h3>
                                            <span class="meta"></span>
                                            <p class="lisiso" style="text-overflow: ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                                                ex ea commodo... <a href="#">read more</a> </p>
                                        </div>
                                    </div>
                                </div>
                            </article>
                            <article class="card ">
                                <div class="image">
                                    <img class="picture" src="img/petinst1.jpg" />
                                </div>
                                <div class="entry">
                                    <div class="context">
                                        <div class="text ">
                                            <h3>Explode!</h3>
                                            <span class="meta"></span>
                                            <p class="lisiso ">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                                                ex ea commodo... <a href="#">read more</a> </p>
                                        </div>
                                    </div>
                                </div>
                            </article>
                            <article class="card ">
                                <div class="image">
                                    <img class="picture" src="img/petinst1.jpg" />
                                </div>
                                <div class="entry">
                                    <div class="context">
                                        <div class="text ">
                                            <h3 class="title ">Explode!</h3>
                                            <span class="meta"></span>
                                            <p class="lisiso ">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                                                ex ea commodo... <a href="#">read more</a> </p>
                                        </div>
                                    </div>
                                </div>
                            </article>
                        </div>

                    </div>

                </div>
                <div class="item-second ">
                    <div class="banner-cont cont ">
                        <div class="hd  ">
                            <h2 class="title ell">
                                最新资讯
                            </h2>
                        </div>
                        <ul class="focal ">
                            <li>
                                <div class="photo ">
                                    <a href=""><img width="120" height="120" src="img/new1.jpg" alt=""></a>
                                </div>
                                <div class="text">
                                    <h3 class="title ell">
                                        <a href="">有宠专家在线 闪耀归来！快来下载最新版本吧~</a>
                                    </h3>
                                    <p class="summary">
                                        有宠专家在线 闪耀归来！养宠问题从此不用愁！
                                    </p>
                                </div>
                            </li>
                            <li>
                                <div class="photo ">
                                    <a href=""><img width="120" height="120" src="img/new2.jpg" alt=""></a>
                                </div>
                                <div class="text">
                                    <h3 class="title ell">
                                        <a href="">有宠专家在线 闪耀归来！快来下载最新版本吧~</a>
                                    </h3>
                                    <p class="summary">
                                        有宠专家在线 闪耀归来！养宠问题从此不用愁！
                                    </p>
                                </div>
                            </li>
                        </ul>
                        <div class="news-po-list c">

                            <table>
                                <tr>
                                    <td><a href="" class="indeto2">最新</a></td>
                                    <td><a href="" class="ell">这位母亲放弃工作 专为赛狗编织毛衣</a></td>
                                </tr>
                                <tr>
                                    <td><a href="" class="indeto2">最新</a></td>
                                    <td><a href="" class="ell">这位母亲放弃工作 专为赛狗编织毛衣</a></td>
                                </tr>
                                <tr>
                                    <td><a href="" class="indeto2">最新</a></td>
                                    <td><a href="" class="ell">这位母亲放弃工作 专为赛狗编织毛衣</a></td>
                                </tr>
                                <tr>
                                    <td><a href="" class="indeto2">最新</a></td>
                                    <td><a href="" class="ell">这位母亲放弃工作 专为赛狗编织毛衣</a></td>
                                </tr>
                                <tr>
                                    <td><a href="" class="indeto2">最新</a></td>
                                    <td><a href="" class="ell">这位母亲放弃工作 专为赛狗编织毛衣</a></td>
                                </tr>
                                <tr>
                                    <td><a href="" class="indeto2">最新</a></td>
                                    <td><a href="" class="ell">这位母亲放弃工作 专为赛狗编织毛衣</a></td>
                                </tr>
                            </table>

                            <table>
                                <tr>
                                    <td><a href="" class="indeto2">最新</a></td>
                                    <td><a href="" class="">这位母亲放弃工作 专为赛狗编织毛衣</a></td>
                                </tr>
                                <tr>
                                    <td><a href="" class="indeto2">最新</a></td>
                                    <td><a href="" class="">这位母亲放弃工作 专为赛狗编织毛衣</a></td>
                                </tr>
                                <tr>
                                    <td><a href="" class="indeto2">最新</a></td>
                                    <td><a href="" class="">这位母亲放弃工作 专为赛狗编织毛衣</a></td>
                                </tr>
                                <tr>
                                    <td><a href="" class="indeto2">最新</a></td>
                                    <td><a href="" class="">这位母亲放弃工作 专为赛狗编织毛衣</a></td>
                                </tr>
                                <tr>
                                    <td><a href="" class="indeto2">最新</a></td>
                                    <td><a href="" class="">这位母亲放弃工作 专为赛狗编织毛衣</a></td>
                                </tr>
                                <tr>
                                    <td><a href="" class="indeto2">最新</a></td>
                                    <td><a href="" class="">这位母亲放弃工作 专为赛狗编织毛衣</a></td>
                                </tr>
                            </table>

                        </div>
                    </div>


                </div>
                <div class="item-third">
                    <div class="index-rit">
                        <!--热门活动 [-->
                        <div class="banner-cont cont">
                            <div class="hd">
                                <h2 class="title">热门活动</h2>
                                <a target="_blank" rel="nofollow" href="#" ">更多>></a>
                            </div>
                            <ul class="news-hot-list c ">


                                <li class="item ">
                                    <p class="photo ">
                                        <a target="_blank "   href="# ""><img src="img/hotactivity1.jpg" alt="粑粑最棒"></a>
                                </p>
                                <h3 class="title ell"><a target="_blank" rel="nofollow" href="#" ">粑粑最棒</a></h3>
                                    <p class="summary ell ">我的粑粑孔武有力 单手抱我健步如飞 一起跑步运动不气喘 美味大餐信手拈来 你们的粑粑也这么棒吗 【活动要求】 在本话题内发帖，分享铲屎官粑粑的养宠日常，可以从陪主子玩耍、做吃的等方面入手，并配上图片和视频更佳。（记得是粑粑和萌宠哦） 【活动奖品】 最棒粑粑奖5名：奖励谷登鲜肉美毛壮骨营养膏*1 参与奖10名：奖励39宠币 【温馨提示】 1.活动结束后7日内公布获奖名单； 2.本次活动最终解释权归有宠所有。
                                    </p>
                                    <a target="_blank "   class="btn " href="# "" rel="nofollow">查看详情</a>
                                    </li>

                                    <li class="item">
                                        <p class="photo">
                                            <a target="_blank" rel="nofollow" href="#" "><img src="img/hotactivity2.jpg " alt="6月封面萌宠开赛 "></a>
                                    </p>
                                    <h3 class="title ell "><a target="_blank "   href="# "">6月封面萌宠开赛</a>
                                </h3>
                                <p class="summary ell">时而骄阳似火 时而倾盆大雨 多变的夏天挡也挡不住萌宠的美 6月封面萌宠大赛选拔正式开始咯！ 【参与方式】 在话题内发帖参与，晒出爱宠或你和爱宠合照，并附上你与主子的故事（10字以上） 【选拔方式】 官方将在参赛作品中，从热度排名（评论+点赞）前6名，及官方挑选3名。 综合评选出9位6月封面萌宠候选人，再根据有宠用户投票选出最终的2位获奖人选。 【活动时间】 海选6.12~6.20 投票 6.21~6.25 【活动奖品】 1.9位封面萌宠候选人奖励：500宠币
                                    2.2位封面萌宠奖励：全网展示+独家专访+1000宠币 3.10位参与奖：每人188宠币（随机抽取）
                                </p>
                                <a target="_blank" rel="nofollow" class="btn" href="#" "  >查看详情</a>
                                </li>

                                <li class="item ">
                                    <p class="photo ">
                                        <a target="_blank "   href="# ""><img src="img/hotactivity3.jpg" alt="晒毛孩子岁数海报投票"></a>
                                </p>
                                <h3 class="title ell"><a target="_blank" rel="nofollow" href="#" ">晒毛孩子岁数海报投票</a></h3>
                                    <p class="summary ell ">晒一晒毛孩子岁数海报投票开始啦 本次选出9位候选人 六一毛孩子奖将是谁呢 【参与方式】 点击投票参与，每人最多可投3票，最终票数最高的前3位萌宠将当选六一毛孩子。 （候选人照片见本话题下置顶帖） 【投票时间】 官方将在参赛作品中，投票有效期至6月11日23:59:59 【活动奖品】 1.互动话题10位参与奖：奖188宠币/人（随机抽取）； 2.“晒萌宠年龄投票”候选者9名：奖500宠币/人； 3.“晒萌宠年龄投票”获奖者3名：奖价值150元的六一神秘大礼包（内含商城优惠券、APP宠币、宠物用品）
                                        【活动规则】 为保证活动公平性，投票系统将定期检查投票IP与设备，同一IP仅计算一次，如发现恶意刷票情节严重者，将取消参赛资格不予发奖。
                                    </p>
                                    <a target="_blank "   class="btn " href="# "" rel="nofollow">查看详情</a>
                                    </li>


                                    </ul>
                            </div>
                            <!--热门活动 ]-->
                            <!--TAG [-->
                            <div class="tag-cont">
                                <ul>


                                    <li><a target="_blank" href="http://www.yc.cn/search.do?keyword=%25E5%25AE%25A0%25E7%2589%25A9%25E8%25AE%25AD%25E7%25BB%2583">宠物训练</a></li>

                                    <li><a target="_blank" href="http://www.yc.cn/search.do?keyword=%25E5%25AE%25A0%25E7%2589%25A9%25E7%25BE%258E%25E5%25AE%25B9">宠物美容</a></li>

                                    <li><a target="_blank" href="http://www.yc.cn/news/xuangou">宠物选购</a></li>

                                    <li><a target="_blank" href="http://www.yc.cn/search.do?keyword=%25E5%25AE%25A0%25E7%2589%25A9%25E7%25B9%2581%25E8%2582%25B2">宠物繁育</a></li>

                                    <li><a target="_blank" href="http://www.yc.cn/news/yanghu">宠物养护</a></li>

                                    <li><a target="_blank" href="http://www.yc.cn/news/jibing">宠物疾病</a></li>

                                    <li><a target="_blank" href="http://www.yc.cn/news/manhua">宠物漫画</a></li>

                                    <li><a target="_blank" href="http://www.yc.cn/search.do?keyword=%25E4%25BA%25A7%25E5%2593%2581%25E5%2591%25A8%25E8%25BE%25B9">产品周边</a></li>

                                    <li><a target="_blank" href="http://www.yc.cn/news/yule">宠物娱乐</a></li>


                                </ul>
                            </div>
                            <!--TAG ]-->
                            <!--App下载 [-->
                            <div class="div-down">
                                <a href="https://shop.yc.cn" target="_blank"><img src="http://res.ycw.com/web/images/webtoshop.jpg" /></a>
                            </div>
                            <!--App下载 ]-->
                        </div>
                    </div>
                </div>
            </div>
            <!--滚动展示图 [-->
            <div id="swiper2" class="mod pets-news swiper-container">
                <div class="swiper-wrap bx-wrapper">
                    <div class="swiper-slide">
                        <a target=" _blank " href="#">
                            <p class="photo ">
                                <img src="img/slide0.jpg" alt="没有地球妈妈的无私“哺育“，哪有我们的纵情欢乐 " />
                            </p>
                            <p class="caption ell ">
                                没有地球妈妈的无私“哺育“，哪有我们的纵情欢乐
                            </p>
                        </a>
                    </div>

                    <div class="swiper-slide">
                        <a target="_blank " href="#">
                            <p class="photo ">
                                <img src="img/slide1.jpg " alt="故事的小黄花，从出生那年就飘着 " />
                            </p>
                            <p class="caption ell ">故事的小黄花，从出生那年就飘着</p>
                        </a>
                    </div>

                    <div class="swiper-slide">
                        <a target="_blank " href="#">
                            <p class="photo ">
                                <img src="img/slide2.jpg " alt="萌猫告诉你“照片的历史” " />
                            </p>
                            <p class="caption ell ">萌猫告诉你“照片的历史”</p>
                        </a>
                    </div>

                    <div class="swiper-slide">
                        <a target="_blank " href="#">
                            <p class="photo ">
                                <img src="img/slide3.jpg " alt="这只金毛简直是平衡小能手！ " />
                            </p>
                            <p class="caption ell ">这只金毛简直是平衡小能手！</p>
                        </a>
                    </div>

                    <div class="swiper-slide">
                        <a target="_blank " href="#">
                            <p class="photo ">
                                <img src="img/slide4.jpg " />
                            </p>
                            <p class="caption ell ">你是我的小奶糖</p>
                        </a>
                    </div>

                    <div class="swiper-slide">
                        <a target="_blank " href="#">
                            <p class="photo ">
                                <img src="img/slide5.jpg" alt="鹿晗再萌，也没有它们萌！ " />
                            </p>
                            <p class="caption ell ">鹿晗再萌，也没有它们萌！</p>
                        </a>
                    </div>

                    <div class="swiper-slide">
                        <a target="_blank " href="#">
                            <p class="photo ">
                                <img src="img/slide6.jpg" alt="它们的生日party，或许不比你的差！ " />
                            </p>
                            <p class="caption ell ">它们的生日party，或许不比你的差！</p>
                        </a>
                    </div>

                    <div class="swiper-slide">
                        <a target="_blank " href="#">
                            <p class="photo ">
                                <img src="img/slide7.jpg" alt="荒木经惟和爱猫奇洛 " />
                            </p>
                            <p class="caption ell ">荒木经惟和爱猫奇洛</p>
                        </a>
                    </div>

                    <div class="swiper-slide">
                        <a target="_blank " href="#">
                            <p class="photo ">
                                <img src="img/slide8.jpg" alt="世界上最幸福的事，就是被你凝望着吃饭 " />
                            </p>
                            <p class="caption ell ">世界上最幸福的事，就是被你凝望着吃饭</p>
                        </a>
                    </div>

                    <div class="swiper-slide">
                        <a target="_blank " href="#">
                            <p class="photo ">
                                <img src="img/slide9.jpg" alt="有一种颜色只属于天空和大海 " />
                            </p>
                            <p class="caption ell ">有一种颜色只属于天空和大海</p>
                        </a>
                    </div>
                </div>
                <!-- Add Arrows -->
                <div class="swiper-button-next"><i class="iconfont icon-xiangyoujiantou"></i></div>
                <div class="swiper-button-prev"><i class="iconfont icon-xiangzuojiantou"></i></div>
            </div>
            <!--滚动展示图 ]-->
        </div>
        <!--达人晒图 [-->
        <div class="picwall ">
            <div class="mod c">
                <div class="cont">
                    <div class="hd">
                        <h2 class="title">达人晒图</h2>
                        <a target="_blank" href="">更多>></a                >
              </div>
              <div class="talk-list c">
                <div class="focal">
                  <a
                    target="_blank" href="">
                    <p class="photo">
                      <img width="455" height="300" src="img/01.jpg" alt="花仙子基"/>
                    </p>
                    <div class="txt">
                      <em>
                        <img src=""  alt=""/>
                      </em>
                         <span class="name ell">罐头の麻麻👑</span>
                        <span class="icon-hand">213</span>
                    </div>
                    </a>
                    </div>

                    <div>
                        <a target="_blank" href="">
                            <p class="photo">
                                <img width="220" height="300" src="img/02.jpg" />
                            </p>
                            <div class="txt">
                                <em>
                        <img src="" alt=""/>
                      </em>
                                <span class="name ell">宠物摄影师haohao</span>
                                <span class="icon-hand">188</span>
                            </div>
                        </a>
                    </div>

                    <div>
                        <a target="_blank" href="">
                            <p class="photo">
                                <img width="220" height="300" src="img/03.jpg" />
                            </p>
                            <div class="txt">
                                <em>
                        <img src="" alt=""/>
                      </em>
                                <span class="name ell">☞ 仙•森</span>
                                <span class="icon-hand">211</span>
                            </div>
                        </a>
                    </div>

                    <div>
                        <a target="_blank" href="">
                            <p class="photo">
                                <img width="220" height="300" src="img/04.jpg" />
                            </p>
                            <div class="txt">
                                <em>
                        <img src="" alt=""  />
                      </em>
                                <span class="name ell">Vendam</span>
                                <span class="icon-hand">176</span>
                            </div>
                        </a>
                    </div>

                    <div>
                        <a target="_blank" href="">
                            <p class="photo">
                                <img width="220" height="300" src="img/05.jpg" />
                            </p>
                            <div class="txt">
                                <em>
                        <img src="" alt=""/>
                      </em>
                                <span class="name ell">司樱</span>
                                <span class="icon-hand">164</span>
                            </div>
                        </a>
                    </div>

                    <div>
                        <a target="_blank" href="">
                            <p class="photo">
                                <img width="220" height="300" src="img/06.jpg" />
                            </p>
                            <div class="txt">
                                <em>
                                    <img src="" alt="" />
                      </em>
                                <span class="name ell">七月猫</span>
                                <span class="icon-hand">218</span>
                            </div>
                        </a>
                    </div>

                    <div class="focal">
                        <a target="_blank" href="">
                            <p class="photo">
                                <img width="455" height="300" src="img/07.jpg" />
                            </p>
                            <div class="txt">
                                <em>
                        <img src=""alt=""/>
                      </em>
                                <span class="name ell">juan</span>
                                <span class="icon-hand">232</span>
                            </div>
                        </a>
                    </div>

                    <div>
                        <a target="_blank" href="">
                            <p class="photo">
                                <img width="220" height="300" src="img/08.jpg" />
                            </p>
                            <div class="txt">
                                <em>
                        <img src="" alt=""/>
                      </em>
                                <span class="name ell">dan</span>
                                <span class="icon-hand">184</span>
                            </div>
                        </a>
                    </div>
                </div>
                <!-- end ul -->

            </div>
        </div>
    </div>
    <!--达人晒图 ]-->
    <!--宠物百科 [-->
    <div class="petency">
        <div class="mod c">
            <div class="pets-cont js-pets-cont">
                <div class="hd ">
                    <h2 class="title">宠物百科</h2>
                    <div class="filter-menu tab-menu">
                        <a class="filter-dog brl current" href="javascript:void(0);">狗狗</a>
                        <a class="filter-cat brl" href="javascript:void(0);">猫猫</a>
                        <a class="filter-rabbit brl" href="javascript:void(0);">兔子</a>
                        <a class="filter-mouse brl" href="javascript:void(0);">鼠类</a>
                        <a class="filter-other brl" href="javascript:void(0);">其他</a>
                        <a target="_blank" class="more" href="">更多>></a>
                    </div>
                </div>
                <div class=" tab-cont">
                    <ul class="pets-list c">
                        <li class="item">
                            <p class="photo">
                                <a target="_blank" href="">
                                    <img src="img/dog1.jpg" alt="哈士奇" />
                                </a>
                            </p>
                            <p class="summary ell">
                                <a target="_blank" href="">哈士奇</a>
                            </p>
                            <p class="title-box">
                                学名西伯利亚雪橇犬，属于中型犬，是一种原始的古老犬种。哈士奇与金毛犬、拉布拉多并列为三大无攻击型犬类。
                                <a target="_blank" href="" class="more">更多>></a>
                            </p>
                        </li>

                        <li class="item">
                            <p class="photo">
                                <a target="_blank" href="">
                                    <img src="img/dog2.jpg" alt="拉布拉多" />
                                </a>
                            </p>
                            <p class="summary ell">
                                <a target="_blank" href="">拉布拉多</a>
                            </p>
                            <p class="title-box">
                                拉布拉多是一种中大型犬类，个性温和、活泼；智商极高，位列世界犬类第七；适合做导盲犬或其他工作犬。
                                <a target="_blank" href="" class="more">更多>></a>
                            </p>
                        </li>

                        <li class="item">
                            <p class="photo">
                                <a target="_blank" href="">
                                    <img src="img/dog3.jpg" alt="藏獒" />
                                </a>
                            </p>
                            <p class="summary ell">
                                <a target="_blank" href="">藏獒</a>
                            </p>
                            <p class="title-box">
                                藏獒产于中国青藏高原高寒地带，是世界公认的最古老、最稀有的犬种。其特征是“体大如驴，奔驰如虎，吼声如狮”。
                                <a target="_blank" href="" class="more">更多>></a>
                            </p>
                        </li>

                        <li class="item">
                            <p class="photo">
                                <a target="_blank" href="">
                                    <img src="img/dog4.jpg" alt="金毛" />
                                </a>
                            </p>
                            <p class="summary ell">
                                <a target="_blank" href="">金毛</a>
                            </p>
                            <p class="title-box">
                                金毛对人类非常友善，智商高，在犬类智商排行榜上排名第四。最早是一种寻回猎犬，现在多作为导盲犬与宠物狗。
                                <a target="_blank" href="" class="more">更多>></a>
                            </p>
                        </li>

                        <li class="item">
                            <p class="photo">
                                <a target="_blank" href="">
                                    <img src="img/dog5.jpg" alt="萨摩耶" />
                                </a>
                            </p>
                            <p class="summary ell">
                                <a target="_blank" href="">萨摩耶</a>
                            </p>
                            <p class="title-box">
                                萨摩耶以西伯利亚牧民族萨摩人而命名，机警、强壮、灵活、高贵优雅、体格强健，拥有“微笑天使”的称号。
                                <a target="_blank" href="" class="more">更多>></a>
                            </p>
                        </li>

                        <li class="item">
                            <p class="photo">
                                <a target="_blank" href="">
                                    <img src="img/dog6.jpg" alt="贵宾犬" />
                                </a>
                            </p>
                            <p class="summary ell">
                                <a target="_blank" href="">贵宾犬</a>
                            </p>
                            <p class="title-box">
                                贵宾犬以水中捕猎而著称，根据体型可分为标准型，迷你型，玩具型三种。其气质独特，造型多变，漂亮聪明。
                                <a target="_blank" href="" class="more">更多>></a>
                            </p>
                        </li>

                        <li class="item">
                            <p class="photo">
                                <a target="_blank" href="">
                                    <img src="img/dog7.jpg" alt="秋田犬" />
                                </a>
                            </p>
                            <p class="summary ell">
                                <a target="_blank" href="">秋田犬</a>
                            </p>
                            <p class="title-box">
                                起源于17世纪，原产于日本，祖先是一种被叫做秋田狩猎犬的山岳狩猎犬，由流放到日本本州秋田县的日本贵族所培育。
                                <a target="_blank" href="" class="more">更多>></a>
                            </p>
                        </li>

                        <li class="item">
                            <p class="photo">
                                <a target="_blank" href="">
                                    <img src="img/dog08.jpg" alt="博美犬" />
                                </a>
                            </p>
                            <p class="summary ell">
                                <a target="_blank" href="">博美犬</a>
                            </p>
                            <p class="title-box">
                                博美犬起源于19世纪，原产于德国，属尖嘴犬系品种，祖先为北极的雪橇犬。体型小巧可爱，适合当伴侣犬。
                                <a target="_blank" href="" class="more">更多>></a>
                            </p>
                        </li>
                    </ul>
                    <ul class="pets-list c">
                        <li class="item">
                            <p class="photo">
                                <a target="_blank" href="">
                                    <img src="img/cat1.jpg" alt="布偶猫" />
                                </a>
                            </p>
                            <p class="summary ell">
                                <a target="_blank" href="">布偶猫</a>
                            </p>
                            <p class="title-box">
                                原产地美国，又称布拉多尔猫，是现存体型最大、体重最重的猫之一。布偶猫较为温顺好静，对人友善，美丽而优雅。
                                <a target="_blank" href="" class="more">更多>></a>
                            </p>
                        </li>

                        <li class="item">
                            <p class="photo">
                                <a target="_blank" href="">
                                    <img src="img/cat2.jpg" alt="加菲猫" />
                                </a>
                            </p>
                            <p class="summary ell">
                                <a target="_blank" href="">加菲猫</a>
                            </p>
                            <p class="title-box">
                                学名异国短毛猫，是在60年代的美国，人工将波斯猫等长毛种的猫与美国短毛猫、缅甸猫等交配繁殖出来的品种。
                                <a target="_blank" href="" class="more">更多>></a>
                            </p>
                        </li>

                        <li class="item">
                            <p class="photo">
                                <a target="_blank" href="">
                                    <img src="img/cat3.jpg" alt="缅因猫" />
                                </a>
                            </p>
                            <p class="summary ell">
                                <a target="_blank" href="">缅因猫</a>
                            </p>
                            <p class="title-box">
                                缅因猫因产于美国缅因州而得名，是北美自然产生的第一个长毛品种，它体格强壮，被毛厚密，属大体型猫种。
                                <a target="_blank" href="" class="more">更多>></a>
                            </p>
                        </li>

                        <li class="item">
                            <p class="photo">
                                <a target="_blank" href="">
                                    <img src="img/cat4.jpg" alt="苏格兰折耳猫" />
                                </a>
                            </p>
                            <p class="summary ell">
                                <a target="_blank" href="">苏格兰折耳猫</a>
                            </p>
                            <p class="title-box">
                                苏格兰折耳猫是一种耳朵有基因突变的猫种。属于中等体型猫，体态浑圆，被毛短密而有弹性。性格温和，平易近人。
                                <a target="_blank" href="" class="more">更多>></a>
                            </p>
                        </li>

                        <li class="item">
                            <p class="photo">
                                <a target="_blank" href="">
                                    <img src="img/cat5.jpg" alt="英国短毛猫" />
                                </a>
                            </p>
                            <p class="summary ell">
                                <a target="_blank" href="">英国短毛猫</a>
                            </p>
                            <p class="title-box">
                                英国短毛猫，体形圆胖，四肢粗短发达，被毛短而密，头大脸圆，温柔平静，对人友善，极易饲养。
                                <a target="_blank" href="" class="more">更多>></a>
                            </p>
                        </li>

                        <li class="item">
                            <p class="photo">
                                <a target="_blank" href="">
                                    <img src="img/cat6.jpg" alt="波斯猫" />
                                </a>
                            </p>
                            <p class="summary ell">
                                <a target="_blank" href="">波斯猫</a>
                            </p>
                            <p class="title-box">
                                波斯猫是最常见的长毛猫。它拥有可爱的面庞，长而华丽的背毛，优雅的举止，故有“猫中王子”、“王妃”之称。
                                <a target="_blank" href="" class="more">更多>></a>
                            </p>
                        </li>

                        <li class="item">
                            <p class="photo">
                                <a target="_blank" href="">
                                    <img src="img/cat7.jpg" alt="暹罗猫" />
                                </a>
                            </p>
                            <p class="summary ell">
                                <a target="_blank" href="">暹罗猫</a>
                            </p>
                            <p class="title-box">
                                暹罗猫原产于泰国（故名暹罗）， 200多年前，这种珍贵的猫仅在泰国皇宫和大寺院中饲养，是足不出户的贵族。
                                <a target="_blank" href="" class="more">更多>></a>
                            </p>
                        </li>

                        <li class="item">
                            <p class="photo">
                                <a target="_blank" href="">
                                    <img src="img/cat8.jpg" alt="美国短毛猫" />
                                </a>
                            </p>
                            <p class="summary ell">
                                <a target="_blank" href="">美国短毛猫</a>
                            </p>
                            <p class="title-box">
                                美国短毛猫是原产美国的一种猫，其祖先为欧洲早期移民带到北美的猫种，素以体格魁伟，肌肉发达而著称。
                                <a target="_blank" href="" class="more">更多>></a>
                            </p>
                        </li>
                    </ul>
                    <ul class="pets-list c">
                        <li class="item">
                            <p class="photo">
                                <a target="_blank" href="">
                                    <img src="img/rab1.jpg" alt="安哥拉兔" />
                                </a>
                            </p>
                            <p class="summary ell">
                                <a target="_blank" href="">安哥拉兔</a>
                            </p>
                            <p class="title-box">
                                安哥拉兔是世界著名的毛用型兔品种，长毛兔的一种。其毛发浓密细长，网络又称草泥兔。
                                <a target="_blank" href="" class="more">更多>></a>
                            </p>
                        </li>

                        <li class="item">
                            <p class="photo">
                                <a target="_blank" href="">
                                    <img src="img/rab2.jpg" alt="迷你垂耳兔" />
                                </a>
                            </p>
                            <p class="summary ell">
                                <a target="_blank" href="">迷你垂耳兔</a>
                            </p>
                            <p class="title-box">
                                迷你垂耳兔原产于欧美，文静温和，小巧可爱，现多分布于英美地区。它和荷兰垂耳兔相似，但体格更粗壮，头较大。
                                <a target="_blank" href="" class="more">更多>></a>
                            </p>
                        </li>

                        <li class="item">
                            <p class="photo">
                                <a target="_blank" href="">
                                    <img src="img/rab3.jpg" alt="荷兰侏儒兔" />
                                </a>
                            </p>
                            <p class="summary ell">
                                <a target="_blank" href="">荷兰侏儒兔</a>
                            </p>
                            <p class="title-box">
                                荷兰侏儒兔，目前体积最小的宠物兔。头大身体小，头型浑圆饱满像颗苹果，耳朵的比例也比一般兔子明显短小许多。
                                <a target="_blank" href="" class="more">更多>></a>
                            </p>
                        </li>

                        <li class="item">
                            <p class="photo">
                                <a target="_blank" href="">
                                    <img src="img/rab4.jpg" alt="巨型花明兔" />
                                </a>
                            </p>
                            <p class="summary ell">
                                <a target="_blank" href="">巨型花明兔</a>
                            </p>
                            <p class="title-box">
                                巨型花明兔原产于比利时，体型庞大，耳最少有14.6cm，身长最少有50cm，全身长满肌肉，毛浓密有光泽。
                                <a target="_blank" href="" class="more">更多>></a>
                            </p>
                        </li>

                        <li class="item">
                            <p class="photo">
                                <a target="_blank" href="">
                                    <img src="img/rab5.jpg" alt="荷兰兔" />
                                </a>
                            </p>
                            <p class="summary ell">
                                <a target="_blank" href="">荷兰兔</a>
                            </p>
                            <p class="title-box">
                                荷兰兔是中型兔中较娇小的品种，毛色分布独特，脸部有倒V字形的白色区块，身体前半部与后半部的毛色分界清晰。
                                <a target="_blank" href="" class="more">更多>></a>
                            </p>
                        </li>

                        <li class="item">
                            <p class="photo">
                                <a target="_blank" href="">
                                    <img src="img/rab6.jpg" alt="荷兰垂耳兔" />
                                </a>
                            </p>
                            <p class="summary ell">
                                <a target="_blank" href="">荷兰垂耳兔</a>
                            </p>
                            <p class="title-box">
                                荷兰垂耳兔性情温驯，体型迷你可爱，根据其外貌特征可分为标准美国荷兰垂耳兔与非标准型（中国）荷兰垂耳兔。
                                <a target="_blank" href="" class="more">更多>></a>
                            </p>
                        </li>

                        <li class="item">
                            <p class="photo">
                                <a target="_blank" href="">
                                    <img src="img/rab7.jpg" alt="侏儒海棠兔" />
                                </a>
                            </p>
                            <p class="summary ell">
                                <a target="_blank" href="">侏儒海棠兔</a>
                            </p>
                            <p class="title-box">
                                侏儒海棠兔，原产于德国，小型宠物兔品种，性格活泼、警觉，好奇心旺盛，容易和人相处，属个性相当可爱的品种。
                                <a target="_blank" href="" class="more">更多>></a>
                            </p>
                        </li>

                        <li class="item">
                            <p class="photo">
                                <a target="_blank" href="">
                                    <img src="img/rab8.jpg" alt="英国垂耳兔" />
                                </a>
                            </p>
                            <p class="summary ell">
                                <a target="_blank" href="">英国垂耳兔</a>
                            </p>
                            <p class="title-box">
                                第一只英国垂耳兔的原形出现在非洲阿尔及尔，据说是欧洲探险家将其带回，不断加强它大耳下垂的特征而繁衍出来的。
                                <a target="_blank" href="" class="more">更多>></a>
                            </p>
                        </li>
                    </ul>
                    <ul class="pets-list c">
                        <li class="item">
                            <p class="photo">
                                <a target="_blank" href="">
                                    <img src="img/mos1.jpg" alt="龙猫" />
                                </a>
                            </p>
                            <p class="summary ell">
                                <a target="_blank" href="">龙猫</a>
                            </p>
                            <p class="title-box">
                                学名南美洲栗鼠，以皮毛柔软漂亮而闻名于世。因酷似宫崎骏电影TOTORO中的卡通龙猫，故称之为龙猫。
                                <a target="_blank" href="" class="more">更多>></a>
                            </p>
                        </li>

                        <li class="item">
                            <p class="photo">
                                <a target="_blank" href="">
                                    <img src="img/mos2.jpg" alt="仓鼠" />
                                </a>
                            </p>
                            <p class="summary ell">
                                <a target="_blank" href="">仓鼠</a>
                            </p>
                            <p class="title-box">
                                仓鼠主要分布于亚洲，少数分布于欧洲。仓鼠迷你可爱，是一种很强势的独居动物，同时也是一种很受欢迎的宠物。
                                <a target="_blank" href="" class="more">更多>></a>
                            </p>
                        </li>

                        <li class="item">
                            <p class="photo">
                                <a target="_blank" href="">
                                    <img src="img/mos3.jpg" alt="松鼠" />
                                </a>
                            </p>
                            <p class="summary ell">
                                <a target="_blank" href="">松鼠</a>
                            </p>
                            <p class="title-box">
                                松鼠，特征是长着毛茸茸的长尾巴。根据生活环境不同，松鼠可分为树松鼠、地松鼠和石松鼠等。
                                <a target="_blank" href="" class="more">更多>></a>
                            </p>
                        </li>

                        <li class="item">
                            <p class="photo">
                                <a target="_blank" href="">
                                    <img src="img/mos4.jpg" alt="荷兰猪" />
                                </a>
                            </p>
                            <p class="summary ell">
                                <a target="_blank" href="">荷兰猪</a>
                            </p>
                            <p class="title-box">
                                学名豚鼠，因肥笨且头部长的像猪而得名荷兰猪。它们的祖先来自南美洲的安第斯山脉，原是当地土著的食物来源。
                                <a target="_blank" href="" class="more">更多>></a>
                            </p>
                        </li>

                        <li class="item">
                            <p class="photo">
                                <a target="_blank" href="">
                                    <img src="img/mos5.jpg" alt="金丝熊" />
                                </a>
                            </p>
                            <p class="summary ell">
                                <a target="_blank" href="">金丝熊</a>
                            </p>
                            <p class="title-box">
                                金丝熊是仓鼠当中最早成为人类宠物的。原产于叙利亚、黎巴嫩等国家。1938年引入美国后才正式成为宠物分类。
                                <a target="_blank" href="" class="more">更多>></a>
                            </p>
                        </li>

                        <li class="item">
                            <p class="photo">
                                <a target="_blank" href="">
                                    <img src="img/mos6.jpg" alt="花栗鼠" />
                                </a>
                            </p>
                            <p class="summary ell">
                                <a target="_blank" href="">花栗鼠</a>
                            </p>
                            <p class="title-box">
                                花栗鼠是灰松鼠的近亲，个头比松鼠小得多。生性较大胆，特别有好奇心，智商高，非常容易被训练。
                                <a target="_blank" href="" class="more">更多>></a>
                            </p>
                        </li>

                        <li class="item">
                            <p class="photo">
                                <a target="_blank" href="">
                                    <img src="img/mos7.jpg" alt="日本小鼯鼠" />
                                </a>
                            </p>
                            <p class="summary ell">
                                <a target="_blank" href="">日本小鼯鼠</a>
                            </p>
                            <p class="title-box">
                                日本小鼯鼠多栖息于高山密林中，属于夜行性动物，特有的大眼睛适合其夜间活动，是最适合夜猫子饲食的宠物。
                                <a target="_blank" href="" class="more">更多>></a>
                            </p>
                        </li>

                        <li class="item">
                            <p class="photo">
                                <a target="_blank" href="">
                                    <img src="img/mos8.jpg" alt="小毛足鼠" />
                                </a>
                            </p>
                            <p class="summary ell">
                                <a target="_blank" href="">小毛足鼠</a>
                            </p>
                            <p class="title-box">
                                小毛足鼠又称毛拓鼠、公婆类仓鼠。仓鼠中体形最小的一种，非常神经质，怕人，较难训练，但很少咬人。
                                <a target="_blank" href="" class="more">更多>></a>
                            </p>
                        </li>
                    </ul>
                    <ul class="pets-list c">
                        <li class="item">
                            <p class="photo">
                                <a target="_blank" href="">
                                    <img src="img/we1.jpg" alt="东方泥龟" />
                                </a>
                            </p>
                            <p class="summary ell">
                                <a target="_blank" href="">东方泥龟</a>
                            </p>
                            <p class="title-box">
                                东方泥龟是半水栖龟类，头部有明显的斑点或斑纹，背甲通常是深褐色或黄色甚至于全黑，平滑无龙骨且没有图案。
                                <a target="_blank" href="" class="more">更多>></a>
                            </p>
                        </li>

                        <li class="item">
                            <p class="photo">
                                <a target="_blank" href="">
                                    <img src="img/we2.jpg" alt="热带鱼" />
                                </a>
                            </p>
                            <p class="summary ell">
                                <a target="_blank" href="">热带鱼</a>
                            </p>
                            <p class="title-box">
                                热带鱼，是养鱼爱好者为区别于其他观赏鱼类，将热带、亚热带等地特有的这部分观赏鱼类统称为热带鱼。
                                <a target="_blank" href="" class="more">更多>></a>
                            </p>
                        </li>

                        <li class="item">
                            <p class="photo">
                                <a target="_blank" href="">
                                    <img src="img/we3.jpg" alt="鹦鹉鱼" />
                                </a>
                            </p>
                            <p class="summary ell">
                                <a target="_blank" href="">鹦鹉鱼</a>
                            </p>
                            <p class="title-box">
                                鹦鹉鱼因色彩艳丽，嘴型酷似鹦鹉嘴型而得名。由于是生活在珊瑚礁中的热带鱼类，所以人工饲养时需要注意水温。
                                <a target="_blank" href="" class="more">更多>></a>
                            </p>
                        </li>

                        <li class="item">
                            <p class="photo">
                                <a target="_blank" href="">
                                    <img src="img/we4.jpg" alt="巴西红耳龟" />
                                </a>
                            </p>
                            <p class="summary ell">
                                <a target="_blank" href="">巴西红耳龟</a>
                            </p>
                            <p class="title-box">
                                巴西红耳龟是一种水栖龟类。因其头顶后部两侧有2条红色粗条纹，故又名为红耳龟，是龟类中的优良品种。
                                <a target="_blank" href="" class="more">更多>></a>
                            </p>
                        </li>

                        <li class="item">
                            <p class="photo">
                                <a target="_blank" href="">
                                    <img src="img/we5.jpg" alt="接吻鱼" />
                                </a>
                            </p>
                            <p class="summary ell">
                                <a target="_blank" href="">接吻鱼</a>
                            </p>
                            <p class="title-box">
                                接吻鱼属于小型观赏鱼的一种，以鱼喜相互“接吻”而闻名。但接吻鱼的“接吻”并不是友情表示，而是一种争斗。
                                <a target="_blank" href="" class="more">更多>></a>
                            </p>
                        </li>

                        <li class="item">
                            <p class="photo">
                                <a target="_blank" href="">
                                    <img src="img/we6.jpg" alt="神仙鱼" />
                                </a>
                            </p>
                            <p class="summary ell">
                                <a target="_blank" href="">神仙鱼</a>
                            </p>
                            <p class="title-box">
                                神仙鱼原产于南美洲圭亚那、巴西。头小而尖体侧扁，呈菱形。背鳍和臀鳍很长大，挺拔如三角帆，故有小鳍帆鱼之称。
                                <a target="_blank" href="" class="more">更多>></a>
                            </p>
                        </li>

                        <li class="item">
                            <p class="photo">
                                <a target="_blank" href="">
                                    <img src="img/we7.jpg" alt="绣眼鸟" />
                                </a>
                            </p>
                            <p class="summary ell">
                                <a target="_blank" href="">绣眼鸟</a>
                            </p>
                            <p class="title-box">
                                绣眼鸟是小型食虫鸟类，因其眼圈被一些明显的白色绒状短羽所环绕，形成鲜明的白眼圈得绣眼之名。
                                <a target="_blank" href="" class="more">更多>></a>
                            </p>
                        </li>

                        <li class="item">
                            <p class="photo">
                                <a target="_blank" href="">
                                    <img src="img/we8.jpg" alt="金丝雀" />
                                </a>
                            </p>
                            <p class="summary ell">
                                <a target="_blank" href="">金丝雀</a>
                            </p>
                            <p class="title-box">
                                金丝雀是羽色和鸣叫兼优的笼养观赏鸟。有24个品种，在国内外皆被列为高贵笼养观赏鸟之一。
                                <a target="_blank" href="" class="more">更多>></a>
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!--宠物百科 ]-->
    <!-- </div>
    </div> -->
    <script src="js/jquery-1.11.3.js "></script>
    <a class="gotop" href="#" style="display: block;"></a>
    <a href="#" style="display: none;" class="j-tips-download">down</a>
    <script src="js/swiper.min.js "></script>
    <script>
        var mySwiper1 = new Swiper('#swiper1', {
            direction: 'horizontal', // 水平切换选项
            loop: true,
            spaceBetween: 20,
            // 循环模式选项
            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
            },
            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },




        })
        console.log(mySwiper1.pagination)
        var mySwiper2 = new Swiper('#swiper2', {
            direction: 'horizontal', // 水平切换选项
            loop: true,
            loopFillGroupWithBlank: true,
            hideOnClick: true,
            autoplay: true, // 循环模式选项
            // autoplay: {
            //     delay: 2500,
            //     disableOnInteraction: false,
            // },
            slidesPerView: 5,
            slidesPerGroup: 1,

            //如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },

        })
        console.log(mySwiper2.getTranslate)
        console.log(mySwiper2.loopFix)
        console.log(mySwiper2.slide)
            //鼠标移出隐藏按钮，移入显示按钮
        mySwiper2.el.onmouseoverout = function() {
            mySwiper2.navigation.$nextEl.removeClass('hide');
            mySwiper2.navigation.$prevEl.removeClass('hide');
        }
        mySwiper2.el.onmouseoverover = function() {
            mySwiper2.navigation.$nextEl.addClass('hide');
            mySwiper2.navigation.$prevEl.addClass('hide');
        }
    </script>
    <script>
        var self = $(this),
            menus = self.find(options.tabMenu).children(),
            conts = self.find(options.tabCont).children();
        menus.first().addClass(options.classname);
        conts.hide().first().show();
        menus.on(options.event, function() {
            var index = $(this).index();
            $(this).addClass(options.classname).siblings().removeClass(options.classname);
            conts.eq(index).show().siblings().hide();
            if (options.callback) {
                options.callback(this);
            }
        });
        },
        //多行文字超出隐藏
        clamp: function(options) {
        options = $.extend({
        num: 60 //多少个文字
        }, options);
        $(this).each(function() {
        var self = $(this),
            text = self.text(),
            textLength = text.length;
        if (textLength > options.num) {
            var result = text.substr(0, options.num) + "...";
            self.html(result);
        }
        });
        }
        });
        })(jQuery);

        $(".js-pets-cont").tabs({
            "classname": "current"
        });
    </script>


</body>

</html>